<template>
	<view class="ImageView" v-if="ImageShow">
		<swiper class="swiper" :current="current" vertical :style="styles" @catchtouchmove="catchSwipeMove">
			<swiper-item v-for="item,index in imageList" :key="item.Murl">
				<view class="imageBox" @click="showclick">
					<view class="edit" v-if="type!='none'&&item.Mtype=='image'">
						<view @click.stop="()=>{}">
							<uni-icons @click="toEdit(item,index)" style="margin-right: 20rpx;" type="compose" size="30"
								color="#fff"></uni-icons>
						</view>
					</view>
					<view class="top">
						<image v-if="item.Mtype=='image'" class="image" :src="item.Murl" mode="aspectFit">
						</image>
						<view class="play" v-if="item.Mtype=='video'">
							<image @click.stop="toVideoView(item.Murl)" src="/static/play.png" mode=""></image>
						</view>
						<!-- <video v-if="item.Mtype=='video'" :src="item.Murl"></video> -->
						<!-- <MyVideo v-if="item.Mtype=='video'" :videoUrl="item.Murl"></MyVideo> -->
					</view>
					<view class="bottom" @touchmove.passive.stop="catchContentMove">
						<view v-for="(item,index) in PropData" :key="index">
							{{item.ControlName}}: {{item.DefaultValue}}
						</view>
						<view>
							描述 : {{text}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MyVideo from './videoIframe.vue'
	export default {
		components: {
			MyVideo,
		},
		data() {
			return {
				text: '',
				current: 0,
				ImageShow: false,
				styles: {
					position: 'fixed',
					width: '100vw',
					height: '100vh',
					backgroundColor: 'rgba(0,0,0,0.8)',
					top: 0,
					left: 0,
					zIndex: 9999
				},
				ImageUrl: '',
				imageList: [],
				PropData: [],
				type: ''
			};
		},
		methods: {
			toVideoView(url) {
				uni.navigateTo({
					url: '/pages/video/video?src=' + url
				})
			},
			toEdit(item, index) {
				this.$emit('close', true)
				uni.showTabBar()
				this.$emit('setEdit', '1')
				uni.navigateTo({
					url: '/pages/EditImage/EditImage?picture=' + item.Murl + '&type=' + this.type + '&index=' +
						index
				})
				setTimeout(() => {
					this.ImageShow = false
				}, 500)
			},
			catchSwipeMove(e) {
				// 阻止默认行为
				e.preventDefault();
			},
			// 捕获滚动区域的滑动事件
			catchContentMove(e) {
				e.stopPropagation();
			},
			showclick() {
				this.$emit('close', true)
				this.ImageShow = false
				uni.showTabBar()
				// 删除编辑图片缓存
				if (this.type == 'local') uni.removeStorageSync('localImgList')
				else if (this.type == 'upload') uni.removeStorageSync('uploadImgList')
			},
			open(arr, remark, current, PropData, type) {
				this.ImageShow = true
				uni.hideTabBar()
				this.imageList = arr
				this.text = remark
				this.current = current || 0
				this.PropData = PropData || []
				this.type = type
			},
			changeImgList(arr) {
				console.log('触发了图片变更', arr);
				console.log(this.imageList[this.current], arr[this.current].Murl);
				this.imageList = arr
				this.ImageShow = true
				// this.$set(this.imageList[this.current], 'Murl', arr[this.current].Murl)
			}
		}
	}
</script>

<style lang="scss">
	.ImageView {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
	}

	.imageBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		position: relative;

		.edit {
			position: fixed;
			z-index: 99;
			top: 30px;
			/* #ifdef H5 */
			top: 100px;
			/* #endif */
			right: 0;
		}

		.top {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;

			.play {
				width: 236rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bottom {
			box-sizing: border-box;
			height: 300rpx;
			padding: 20rpx;
			color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.1);
			width: 100%;
			overflow-y: auto;
		}
	}
</style>